<template>
  <div id="app" v-cloak>
    <keep-alive include="serach,index">
      <router-view></router-view>
    </keep-alive>
    <van-tabbar v-model="active" route active-color="#CC0000" v-if="isShowbar">
      <van-tabbar-item
        v-for="item in menu"
        :key="item.path"
        :icon="item.icon"
        :to="item.path"
        :badge="item.num ? (cartlist.length == 0 ? '' : cartlist.length) : ''"
        >{{ item.text }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      isShowbar: true,
      active: 0,
      menu: [
        {
          path: "/index",
          text: "首页",
          icon: "home-o",
          num: false,
        },
        {
          path: "/discover",
          text: "发现",
          icon: "search",
          num: false,
        },
        {
          path: "/cart",
          text: "购物车",
          icon: "cart-o",
          num: true,
        },
        {
          path: "/mine",
          text: "我的",
          icon: "friends-o",
          num: false,
        },
      ],
    };
  },
  computed: {
    cartlist() {
      return this.$store.state.cart.cartlist;
    },
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.router-link-active {
  color: #f00;
  font-weight: bold;
}
.active {
  color: #58bc58;
  font-weight: bold;
}
.price {
  del {
    margin-right: 5px;
    color: #666;
    &::before {
      content: "￥";
    }
  }
  span {
    @extend del;
    color: #f00;
  }
}
.p-3 {
  padding: 0.6em;
}
.has-tabbar {
  padding-bottom: 50px;
}
[v-cloak] {
  display: none;
}
</style>
